import "./card.scss";
import cardBg from "./assets/21192.svg";
import icon_close from "./assets/close.svg";
import icon_devide from "./assets/4718.svg";
import { defineComponent } from "vue";
import bgItem1 from "./assets/4407.svg";
import bgItem2 from "./assets/4409.svg";
import bgItem3 from "./assets/4409.svg";
import bgItem4 from "./assets/4409.svg";

export default defineComponent({
	name: "Card",
	setup() {
		return () => (
			<div className={"w-[362px] h-[238px] flex flex-col box-border"}>
				<div className={"w-full h-[34px] relative"}>
					<img className={"w-full h-full"} src={cardBg} alt=""></img>
					<div className={"absolute w-full h-full box-border top-0 left-0 bottom-0 right-0 flex flex-row p-1 px-3 items-center"}>
						<div className={"text-[15px] mr-auto font-bold text-white"}>宏电西北光电产业园站</div>
						<img className={"w-[14px] h-[14px]"} src={icon_close} alt=""></img>
					</div>
				</div>
				<div className={"w-full h-full bg-[#061225f2] p-4 text-white flex flex-col justify-between item.scss-center"}>
					<div className={"w-full flex flex-row justify-between text-[14px]"}>
						<div>状态：在线</div>
						<div>地址：华中科技园创新基地9栋</div>
					</div>
					<img className={"my-2"} src={icon_devide} alt=""></img>
					<div className={"grid grid-cols-2 grid-rows-2 w-full h-full "}>
						<Item img={bgItem1} title={"装机容量"} value={"23"} unit={"座"}></Item>
						<Item img={bgItem2} title={"今日发电"} value={"358"} unit={"mw"}></Item>
						<Item img={bgItem3} title={"本月发电"} value={"2.90"} unit={"万Kwh"}></Item>
						<Item img={bgItem4} title={"累积发电"} value={"58.9"} unit={"%"}></Item>
					</div>
				</div>
			</div>
		);
	}
});

const Item = defineComponent({
	name: "Item",
	props: { img: String, title: String, value: String, unit: String },
	setup(props) {
		return () => (
			<div className={"w-full h-fit flex flex-row justify-start items-start p-2"}>
				<img className={"w-[46px] h-[46px]"} src={props.img} alt={""} />
				<div className={"h-full flex flex-col justify-between items-start ml-2"}>
					<div>{props.title}</div>
					<div className={" flex flex-row justify-start item.scss-center  text-[14px]"}>
						<div className={"text-[#36CFFF] text-[20px]"}>{props.value}</div>
						<div className={"text-[#BAD9FF]"}>{props.unit}</div>
					</div>
				</div>
			</div>
		);
	}
});
